<template>
    <el-form :inline="true" v-model="attrDataInfo.formData" ref="editorFormRef" size="small" label-width="44px">
        <attr-area></attr-area>
        <el-form-item label="模式">
            <el-select v-model="attrDataInfo.formData.clockModel" placeholder="数字" style="width:200px">
                <el-option key="Digital" label="数字" value="Digital"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="格式" v-show="showAttr">
            <el-select v-model="attrDataInfo.formData.clockTimeFormat" placeholder="请选择格式" style="width:200px" @change="handleChange">
                <el-option v-for="(item, index) in formatArray" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-row v-show="showAttr">
            <el-col :span="24">
                <el-form-item label="字体">
                    <el-select v-model="attrDataInfo.formData.clockFont" placeholder="默认" style="width:200px" @change="handleChange">
                        <el-option v-for="(item, index) in fontArray" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字号">
                    <el-input-number v-model="attrDataInfo.formData.clockFontsize" controls-position="right" :min="19" :max="256" @change="handleChange"></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-show="showAttr">
            <el-col :span="24">
                <el-form-item label="颜色">
                    <el-color-picker v-model="attrDataInfo.formData.clockFontColor" @change="handleChange"></el-color-picker>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import AttrArea from './AttrArea'
import { fontItemArray, dataFormatArray } from '@/const/index'
export default {
    data() {
        return {
            formatArray: dataFormatArray,
            fontArray: fontItemArray,
            showAttr: true
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.handleChange()
        })
    },
    methods: {
        handleChange() {            
            let html = this.$changeTemplateClockFormat(this.attrDataInfo.formData.clockTimeFormat)
            const clockPrams = {}
            clockPrams.html = html
            clockPrams.mode = this.attrDataInfo.formData.clockModel
            clockPrams.size = this.attrDataInfo.formData.clockFontsize
            clockPrams.color = this.attrDataInfo.formData.clockFontColor
            clockPrams.font = this.attrDataInfo.formData.clockFont
            clockPrams.format = this.attrDataInfo.formData.clockTimeFormat
            clockPrams.align = 'left'
            this.$eventBus.$emit('changeAttr', 'clock', clockPrams)
        }
    },
    inject: ['attrDataInfo'],
    components: {
        AttrArea
    }
}
</script>

<style lang="scss" scoped>
    ::v-deep .el-input-number--small{
        width: 200px;
    }
</style>